<template>
	<view class="welcome">
      <view class="card">
        <div class="title">答题时间</div>
        <div class="desc">2024/10/13-2024/10/17</div>
        <div :class="['button', disabled ? 'disabled': '']" @click="toIndex">开始答题</div>
        <div class="rule" style="color: #4141cb">兑奖时间：2024/10/28——2024/11/22</div>
        <div class="rule" @click="toPoly">点击查看活动规则</div>
      </view>
      <u-popup length="80%" v-model="loginPopup" mode="center" border-radius="14">
        <div class="popup-box">
          <u-form :model="form" ref="uForm" label-width="80px">
            <u-form-item label="姓名"><u-input v-model="form.nickname" /></u-form-item>
            <u-form-item label="手机号"><u-input type="phone" v-model="form.username" /></u-form-item>
          </u-form>
          <div class="tips">以上信息仅用于抽取奖品</div>
          <!-- 底部提交按钮 -->
          <view class="exerc-bottom su-border2">
            <button class="su-button" @click="submit">注册/登录</button>
          </view>
        </div>
      </u-popup>

    <u-popup length="90%" v-model="show" mode="center" border-radius="14">
      <div class="popup-box">
        <div class="title">领取奖品</div>
        <u-radio-group v-model="product_id">
          <u-radio
              v-for="(item, index) in productList" :key="index"
              :name="item.id"
              :disabled="item.min_count <= 0 || item.count <= 0"
          >
            <div style="font-size: 24rpx;margin: 20px 0">
              <image style="width: 160rpx;height: 160rpx" :src="item.image"></image>
              <div v-if="item.min_count >0 && item.count >0">
                <div>名称：{{ item.name }}</div>
                <div>可领：{{ item.min_count }}个</div>
              </div>
              <div v-else>
                <div>名称：{{ item.name }}</div>
                <div>今日已抢光</div>
              </div>
            </div>
          </u-radio>
        </u-radio-group>
        <!-- 底部提交按钮 -->
        <view class="exerc-bottom su-border2">
          <button class="su-button" @click="submit2">领取</button>
        </view>
      </div>
    </u-popup>
    <u-popup length="90%" v-model="show2" mode="center" border-radius="14">
      <div class="popup-box">
        <div class="title">确认领取信息</div>
        <div class="tips">以下信息仅用于奖品发放</div>
        <u-form v-if="userInfo" :model="userInfo" ref="uForm" label-width="140px" style="width: 100%">
          <u-form-item label="姓名"><u-input v-model="userInfo.nickname" /></u-form-item>
          <u-form-item label="手机号"><u-input type="phone" v-model="userInfo.phone" /></u-form-item>
          <u-form-item label="身份证号码"><u-input v-model="userInfo.id_no" /></u-form-item>
          <u-form-item label="地址"><u-input v-model="userInfo.address" /></u-form-item>
        </u-form>
        <!-- 底部提交按钮 -->
        <view class="exerc-bottom su-border2">
          <button class="su-button" @click="submit3">确认</button>
        </view>
      </div>
    </u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
        disabled: false,
        userInfo: null,
        loginPopup: false,
        form: {
          nickname: '',
          username: '',
          phone: '',
        },
        show: false,
        show2: false,
        productList: [],
        product_id: ''
			}
		},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfo')
      if (this.userInfo) {
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 10000
        })
        this.$api.getUserInfo({
          id: this.userInfo.id
        }).then(res2 => {
          this.userInfo = res2
        }).finally(() => {
          uni.hideLoading()
        })
      }
      const now = new Date().getTime()
      const start = new Date('2024/10/13').getTime()
      const end = new Date('2024/10/22').getTime()
      if (now < start || now > end) {
        this.disabled = true
      }
    },
		methods: {
      submit() {
        if (!this.form.nickname) {
          uni.showToast({
            title: '请输入姓名',
            icon: 'none'
          })
          return
        }
        if (!this.form.username) {
          uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }
        if (!/^1[3456789]\d{9}$/.test(this.form.username)) {
          uni.showToast({
            title: '请填写正确的手机号',
            icon: 'none'
          })
          return
        }
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 10000
        })
        this.$api.login({
          nickname: this.form.nickname,
          username: this.form.username,
          phone: this.form.username
        }).then(res => {
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          this.userInfo = res
          uni.setStorageSync('userInfo', res)
          this.loginPopup = false
        }).finally(() => {
          uni.hideLoading()
        })
      },
      toIndex() {
        // if (this.disabled) {
        //   const now = new Date().getTime()
        //   const start = new Date('2024/10/13').getTime()
        //   const end = new Date('2024/10/22').getTime()
        //   if (now < start) {
        //     uni.showToast({
        //       title: '活动未开始',
        //       icon: 'none'
        //     })
        //   } else {
        //     uni.showToast({
        //       title: '活动已结束',
        //       icon: 'none'
        //     })
        //   }
        //   return
        // }
        if (!this.userInfo) {
          this.loginPopup = true
          return;
        } else {
          if (this.userInfo.product_id) {
            uni.showToast({
              title: '您已经领取奖品，无需答题',
              icon: 'none'
            })
            return;
          }
          if (this.userInfo.lottery_record_id) {
            uni.showModal({
              title: '提示',
              content: '您已经中奖，请领取奖品',
              success: res => {
                if (res.confirm) {
                  this.show = true
                  this.$api.getLotteryGoodsList().then(res => {
                    this.productList = res.map(item => {
                      // 当天的数据
                      let lotteryRecordList = item.lotteryRecordList.filter(item => {
                        return new Date(item.created_at).toDateString() === new Date().toDateString()
                      })
                      console.log(res.name,lotteryRecordList.length,lotteryRecordList)
                      return {
                        ...item,
                        // 剩余数量
                        // max_count - lotteryRecordList.length
                        min_count: item.max_count - lotteryRecordList.length
                      }
                    })
                  })
                }
              }
            })
            return;
          }
          if (this.userInfo.is_day_lottery) {
            uni.showToast({
              title: '今日您已参与抽奖，明天再来',
              icon: 'none'
            })
            return;
          }
        }
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 10000
        })
        this.$api.createUserPracticeRecord({
          num: 10,
          user_id: this.userInfo.id
        }).then(res => {
          uni.navigateTo({
            url: `/pages/question/create/create?id=${res.id}`
          })
        }).finally(() => {
          uni.hideLoading()
        })
      },
      toPoly() {
        // 去政策协议
        uni.navigateTo({
          url: '/pages/policy/policy'
        })
      },
      submit2() {
        if (!this.product_id) {
          uni.showToast({
            title: '请选择奖品',
            icon: 'none'
          })
          return
        }
        this.show2 = true
      },
      submit3() {
        // 验证姓名、手机号、地址、身份证号码
        if (!this.userInfo.nickname) {
          uni.showToast({
            title: '请填写姓名',
            icon: 'none'
          })
          return
        }
        // 验证手机号格式
        if (!/^1[3456789]\d{9}$/.test(this.userInfo.phone)) {
          uni.showToast({
            title: '请填写正确的手机号',
            icon: 'none'
          })
          return
        }
        // 验证身份证号码格式
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.userInfo.id_no)) {
          uni.showToast({
            title: '请填写正确的身份证号码',
            icon: 'none'
          })
          return
        }
        // 验证地址
        if (!this.userInfo.address) {
          uni.showToast({
            title: '请填写地址',
            icon: 'none'
          })
          return
        }
        uni.showLoading({
          title: '加载中',
          mask: true,
          duration: 10000
        })
        // 更新
        this.$api.updateMember({
          ...this.userInfo,
        }).then(() => {
          // 更新领奖记录
          this.$api.updateLotteryRecord({
            product_id: this.product_id,
            lottery_record_id: this.userInfo.lottery_record_id,
            user_id: this.userInfo.id
          }).then(() => {
            this.show2 = false
            this.show = false
            uni.showToast({
              title: '领取成功',
              icon: 'success'
            })
            this.$api.getUserInfo({
              id: this.userInfo.id
            }).then(res2 => {
              this.userInfo = res2
            })
          })
        })
      }
		}
	}
</script>

<style lang="scss">
.popup-box {
  padding: 30rpx;
  .tips {
    font-size: 24rpx;
    color: red;
    text-align: center;
    margin-bottom: 5rpx;
  }
}
pages {
  height: 100%;
}
.popup-box {
  padding: 30rpx;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 32rpx 0;
    text-align: center;
  }
  .exerc-bottom {
    width: 100%;
    margin-top: 20rpx;
  }
}

.welcome {
  height: 100%;
  background-image: url("/static/images/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30%;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    .title {
      font-size: 20px;
      color: #333;
      text-align: center;
    }
    .desc {
      font-size: 16px;
      color: #666;
      text-align: center;
      margin-top: 10px;
    }
    .button {
      width: 80%;
      margin: 20px auto;
      background-color: #ff4d4f;
      color: #fff;
      text-align: center;
      line-height: 40px;
      border-radius: 20px;
      font-size: 16px;
      &.disabled {
        background-color: #ccc;
      }
    }
    .rule {
      font-size: 16px;
      color: #ff4d4f;
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>
